<template>
  <div>
    <div>
      <div>
        <!-- 背景大的 -->
        <bigbg
          :url="bandat.bgImg"
          :bigtext="bandat.title"
          :smalltext="bandat.subtitle"
        ></bigbg>
        <!-- 景区管理app -->
        <!-- table -->
  <tabless
  :tablearr='tablearr'
  ></tabless>
         <!-- 详情页 -->
    <div v-html='pagetable'>
    </div>
        <!-- over -->
        <!-- 5优秀案例 -->
      <!-- 轮播 -->
      <div
      style="background-color:rgb(246, 248, 251);
     padding-top:10px;
   padding-bottom:20px
      "
      >
 <imgss
   :imgarr='imgarr'
   ></imgss>
      </div>
  
        <!-- over -->
         <div
    style="
    background-color:#1b1c20 ;
    height:10px;
    margin-top:10px">
    </div>
        <!-- 组后 -->
      </div>
    </div>
    <!--  -->
    <!-- 底部组件 -->

    <Header></Header>
    <Footer></Footer>
  </div>
</template>
<script>
//adc856bb-f091-4819-bffb-9e1a24aba08f
import { getlag,getpages,getimgs,gettables} from '@/api/srapi/srapi.js'
import bigbg from "../component/bigbg.vue";
// 导入头部底部组件
//引入头部组件
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
// table
import tabless from "@/views/srdemo/component/table.vue";
//img
import imgss from "@/views/srdemo/component/img.vue";
export default {
  name: "trapoer",
  components: {
    bigbg,
    Header,
    Footer,
     tabless,
    imgss
  },
  data() {
    return {
       bandat:{},//bannner
      pagetable:null,//页面
      times: "",
      currentIndex: 1, //当前中间imgs数组中index
      imgs: [],
      config5: [
        {
          id: "B",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "0",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          transition: "1s",
          lineHeight: "83%",
          overflow: "hidden",
        },
        {
          id: "center",
          position: "absolute",
          width: "87%",
          height: "100%",
          top: "0px",
          left: "6.5%",
          opacity: 1,
          zIndex: 4,
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
        {
          id: "D",
          position: "absolute",
          width: "28%",
          height: "83%",
          top: "8.3%",
          left: "72%",
          opacity: 1,
          zIndex: 2,
          boxShadow: "2px 4px 12px 2px rgba(0, 0, 0, 0.1)",
          lineHeight: "83%",
          borderRadius: "6px",
          transition: "1s",
          overflow: "hidden",
        },
      ],
      centerInfo: 1,
        //轮播图得数据
      imgarr:[],
      //table得数据
      tablearr:[],
      //当前激活得table
      clicktableimg:0
    };
  },
  methods: {
   async getallpages(){
const res= await getlag("adc856bb-f091-4819-bffb-9e1a24aba08f")
 this.bandat=res.data.data
 console.log(res.data.data);
 console.log(res.data.data.pcUrl);
 const pages=await  getpages(res.data.data.pcUrl)
  this. pagetable=pages.data.content

    },
    //获取轮播图
   async getimgss(){
    const res= await getimgs("adc856bb-f091-4819-bffb-9e1a24aba08f")
    // console.log("imgs");
    res.data.data.banners.map((item)=>{
      if (item.bannerImg) {
       this.imgarr.push(item)
      }
    })
    // console.log(this.imgarr);
    },
    //获取table图片
   async gettabless(){
    const res=  await gettables("adc856bb-f091-4819-bffb-9e1a24aba08f")
    // console.log('table图');
    // console.log( res.data.data.tabs);
     res.data.data.tabs.map((item)=>{
      if (item.tabImg) {
       this.tablearr.push(item)
      }
      console.log(this.tablearr);
    })
    },
  },
  
  mounted() {
    // console.log( this.$route.query.id);
   
    //获取页面的全部数据
    this.getallpages()
   //获取轮播图片
   this.getimgss()
   //获取table图片
   this.gettabless()
}
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

//5
.fivebgimg {
  padding-top: 40px;
  height: 744px;
  background: #f6f8fb;
  .fivesimg {
    position: relative;
    width: 1312px;
    margin: 0 auto;
    height: 360px;

    .left {
      position: absolute;
      width: 64px;
      height: 64px;
      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
      box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04),
        0px 2px 8px 0px rgba(0, 0, 0, 0.06);
      border-radius: 32px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      img {
        position: absolute;
        width: 40px;
        height: 40px;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .right {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      width: 64px;
      height: 64px;
      border-radius: 32px;
      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
      box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04),
        0px 2px 8px 0px rgba(0, 0, 0, 0.06);
      img {
        position: absolute;
        width: 40px;
        height: 40px;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .left:hover {
      cursor: pointer;
    }
    .right:hover {
      cursor: pointer;
    }
    .bigboxsimg {
      overflow: hidden;
      height: 360px;
      width: 1140px;
      position: relative;
      margin: 0 auto;
    }
    .tiaozi {
      display: flex;
      margin-top: 16px;
      margin-left: 620px;

      .yuaner {
        margin-left: 8px;
        margin-right: 8px;
        width: 8px;
        height: 8px;
        background: #d1d1d1;
        border-radius: 4px;
      }
      .yuan {
        width: 8px;
        height: 8px;
        background: #d1d1d1;
        border-radius: 4px;
      }
      .bigblue {
        width: 36px;
        height: 8px;
        background: #007aff;
        border-radius: 4px;
      }
      .bigblueer {
        margin-left: 8px;
        margin-right: 8px;
        width: 36px;
        height: 8px;
        background: #007aff;
        border-radius: 4px;
      }
    }
  }
}
</style>
